import React, { Component } from 'react'
import { StyleSheet, View, Image, ScrollView, Text, TouchableOpacity } from 'react-native'
import TabNavigator from 'react-native-tab-navigator';
import { Drawer, Switch, Toast, Provider } from '@ant-design/react-native';
import LinearGradient from 'react-native-linear-gradient';
import Pop from 'rn-global-modal'
import Home from './Home'
import Like from './Like'
import Me from './Me'
import Music from './Music'

/**
 * 底部导航栏数据
 */
const iconSource = [
    { icon: require('../sources/icons/home.png'), selectedIcon: require('../sources/icons/home-select.png'), tabPage: 'Home', tabName: '音乐馆', component: Home },
    // { icon: require('../sources/icons/music.png'), selectedIcon: require('../sources/icons/music-select.png'), tabPage: 'Music', tabName: '播放', component: Music },
    { icon: require('../sources/icons/like.png'), selectedIcon: require('../sources/icons/like-select.png'), tabPage: 'Like', tabName: '我喜欢', component: Like },
    { icon: require('../sources/icons/producer.png'), selectedIcon: require('../sources/icons/producer-select.png'), tabPage: 'Me', tabName: '制作团队', component: Me }
]

const userImage = require('../sources/Darwer/clayelink.png')
const nologin = require('../sources/Darwer/nologin.png')

//定义路由
var navigation = null;


export default class App extends Component {

    constructor(props) {
        super(props);
        navigation = this.props.navigation;

        this.state = {
            selectedTab: 'Home',
            checked: false,
            username: '立即登录',
            login: false,
        }
    }

    


    _onSwitchChange = value => {
        this.setState({
            checked: value,
        });
    };
    _successToast = () => {
        Toast.success('登陆成功', 1)
    }

    _login = () => {
        Pop.show(
            <View style={{ height: 300, paddingTop: 25, paddingBottom: 25, width: '80%', borderRadius: 20, backgroundColor: 'white', justifyContent: 'space-around', alignItems: 'center' }}>
                <Text style={{ fontSize: 15 }}>登录注册解锁更多精彩内容</Text>
                <Text style={{ fontSize: 25 }}>185****0656</Text>
                <TouchableOpacity onPress={() => { this.setState({ login: true, username: 'ClayeLink' }), Pop.hide(), this._successToast() }} style={{ borderRadius: 5, justifyContent: 'center', alignItems: 'center', width: 200, height: 50, backgroundColor: '#C3473A' }}>
                    <Text style={{ fontSize: 18, color: '#FFFFFF' }}>本机号码一键登录</Text>
                </TouchableOpacity>
                <Text style={{ fontSize: 14, color: '#C3473A' }}>其他登录方式</Text>
                <View style={{ alignItems: 'center' }}>
                    <View style={{ flexDirection: 'row' }}>
                        <Text style={{ fontSize: 12, color: '#C3473A' }}>登录即代表你同意</Text>
                        <Text style={{ fontSize: 12, color: '#00a1d6' }}>用户协议、</Text>
                        <Text style={{ fontSize: 12, color: '#00a1d6' }}>隐私政策</Text>
                    </View>
                    <View style={{ flexDirection: 'row' }}>
                        <Text style={{ fontSize: 12, color: '#C3473A' }}>和</Text>
                        <Text style={{ fontSize: 12, color: '#00a1d6' }}>中国移动认证服务政策</Text>
                    </View>
                </View>
            </View>
            , {
                animationType: 'slide-up', maskClosable: true, onMaskClose: () => { '暂时未做处理' }
            })
    }
    render() {

        let tabViews = iconSource.map((item, i) => {
            return (
                <TabNavigator.Item
                    title={item.tabName}
                    selected={this.state.selectedTab === item.tabPage}
                    titleStyle={{ color: '#707070' }}
                    selectedTitleStyle={{ color: '#C3473A' }}
                    renderIcon={() => <Image style={styles.tabIcon} source={item.icon} />}
                    renderSelectedIcon={() => <Image style={styles.tabIcon} source={item.selectedIcon} />}
                    tabStyle={{ alignSelf: 'center' }}
                    onPress={() => { this.setState({ selectedTab: item.tabPage }) }}
                    key={i}
                >
                    <item.component navigation={navigation} _openDrawer={() => this._openDrawer()} selected={this.state.selectedTab}/>
                </TabNavigator.Item>
            );
        })

        const sidebar = (
            <View style={{ flex: 1 }}>
                <View style={{ height: 30, backgroundColor: '#C3473A' }} />
                <View style={{ padding: 10, width: '100%', justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center', backgroundColor: '#C3473A' }}>
                    <TouchableOpacity onPress={this.state.login ? null : this._login}>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                            <Image source={this.state.login ? userImage : nologin} style={{ borderRadius: 50, width: 35, height: 35, margin: 5 }} />
                            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ fontSize: 14, color: '#FFFFFF', marginLeft: 5, marginRight: 5 }}>{this.state.username}</Text>
                                <Image source={require('../sources/Darwer/goto.png')} style={{ borderRadius: 50, width: 15, height: 15 }} />
                            </View>
                        </View>
                    </TouchableOpacity>
                    <Image source={require('../sources/Darwer/saoyisao.png')} style={{ width: 25, height: 25, marginRight: 10 }} />
                </View>

                <ScrollView style={[styles.shouye]} showsVerticalScrollIndicator={false}>
                    <View style={{ width: '100%', padding: 15 }}>
                        {/* <View style={{height:100,backgroundColor:'black',borderRadius:20}}>

                        </View> */}
                        <LinearGradient
                            colors={['#606266', '#909399']}
                            start={{ x: 0, y: 0 }}
                            end={{ x: 1, y: 1 }}
                            style={{ height: 100, borderRadius: 20, padding: 10 }}>
                            <View style={{ borderBottomColor: '#909399', borderBottomWidth: 0.5, paddingBottom: 10 }}>
                                <View style={{ justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center' }}>
                                    <Image source={require('../sources/Darwer/vip.png')} style={{ width: 75, height: 25 }} resizeMode='stretch' />
                                    <View style={{ borderColor: '#FFE3DF', borderWidth: 1, borderRadius: 20, paddingLeft: 10, paddingRight: 10, paddingTop: 5, paddingBottom: 5 }}>
                                        <Text style={{ color: '#FFE3DF', fontWeight: 'bold', fontSize: 12 }}>会员中心</Text>
                                    </View>
                                </View>
                                <Text style={{ color: '#FFE3DF', fontSize: 10, paddingLeft: 5 }}>2022.01.25到期，我的VIP</Text>
                            </View>

                            <View style={{ flex: 1, justifyContent: 'flex-start', paddingTop: 10 }}>
                                <Text style={{ color: '#FFE3DF', fontSize: 12, paddingLeft: 5 }}>古风装扮上新！来抽故宫文创周边</Text>

                            </View>

                        </LinearGradient>
                    </View>
                    <View style={{ width: '100%', paddingLeft: 15, paddingRight: 15, paddingBottom: 15 }}>
                        <View style={{ flex: 1, backgroundColor: '#FFFFFF', borderRadius: 20, paddingLeft: 20, paddingTop: 10, paddingBottom: 10 }}>
                            <View style={{ height: 45, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderBottomWidth: 0.3, borderBottomColor: '#909399' }}>
                                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                    <Image source={require('../sources/Darwer/message.png')} style={{ width: 20, height: 20 }} />
                                    <Text style={{ marginLeft: 20, fontWeight: 'bold', color: '#303133' }}>我的消息</Text>
                                </View>
                                <Image source={require('../sources/Darwer/goto_black.png')} style={{ width: 15, height: 15, marginRight: 20 }} />

                            </View>

                            <View style={{ height: 45, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                    <Image source={require('../sources/Darwer/cloudbei.png')} style={{ width: 30, height: 20 }} />
                                    <Text style={{ marginLeft: 10, fontWeight: 'bold', color: '#303133' }}>云贝中心</Text>
                                </View>
                                <Image source={require('../sources/Darwer/goto_black.png')} style={{ width: 15, height: 15, marginRight: 20 }} />
                            </View>

                        </View>
                    </View>

                    {/* 音乐服务 */}
                    <View style={{ width: '100%', paddingLeft: 15, paddingRight: 15, paddingBottom: 15 }}>
                        <View style={{ flex: 1, backgroundColor: '#FFFFFF', borderRadius: 20 }}>
                            <View style={{ paddingLeft: 20, height: 50, borderBottomWidth: 0.5, borderBottomColor: '#F2F6FC', alignItems: 'center', justifyContent: 'flex-start', width: '100%', flexDirection: 'row' }}>
                                <Text style={{ fontSize: 12, color: '#C0C4CC' }}>音乐服务</Text>
                            </View>

                            <View style={{ paddingLeft: 20, paddingTop: 10, paddingBottom: 10 }}>
                                <View style={{ height: 45, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderBottomWidth: 0.3, borderBottomColor: '#909399' }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                        <Image source={require('../sources/Darwer/piao.png')} style={{ width: 20, height: 20 }} />
                                        <Text style={{ marginLeft: 20, fontWeight: 'bold', color: '#303133' }}>云村有票</Text>
                                    </View>
                                    <Image source={require('../sources/Darwer/goto_black.png')} style={{ width: 15, height: 15, marginRight: 20 }} />
                                </View>
                            </View>
                            <View style={{ paddingLeft: 20, paddingBottom: 10 }}>
                                <View style={{ height: 45, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderBottomWidth: 0.3, borderBottomColor: '#909399' }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                        <Image source={require('../sources/Darwer/shoppingcar.png')} style={{ width: 22, height: 20 }} />
                                        <Text style={{ marginLeft: 20, fontWeight: 'bold', color: '#303133' }}>商城</Text>
                                    </View>
                                    <Image source={require('../sources/Darwer/goto_black.png')} style={{ width: 15, height: 15, marginRight: 20 }} />
                                </View>
                            </View>
                            <View style={{ paddingLeft: 20, paddingBottom: 10 }}>
                                <View style={{ height: 45, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderBottomWidth: 0.3, borderBottomColor: '#909399' }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                        <Image source={require('../sources/Darwer/game.png')} style={{ width: 22, height: 20 }} />
                                        <Text style={{ marginLeft: 20, fontWeight: 'bold', color: '#303133' }}>游戏专区</Text>
                                    </View>
                                    <Image source={require('../sources/Darwer/goto_black.png')} style={{ width: 15, height: 15, marginRight: 20 }} />
                                </View>
                            </View>
                            <View style={{ paddingLeft: 20, paddingBottom: 10 }}>
                                <View style={{ height: 45, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                        <Image source={require('../sources/Darwer/cailing.png')} style={{ width: 20, height: 20 }} />
                                        <Text style={{ marginLeft: 20, fontWeight: 'bold', color: '#303133' }}>口袋彩铃</Text>
                                    </View>
                                    <Image source={require('../sources/Darwer/goto_black.png')} style={{ width: 15, height: 15, marginRight: 20 }} />
                                </View>
                            </View>
                        </View>
                    </View>


                    {/* 其他 */}
                    <View style={{ width: '100%', paddingLeft: 15, paddingRight: 15, paddingBottom: 15 }}>
                        <View style={{ flex: 1, backgroundColor: '#FFFFFF', borderRadius: 20 }}>
                            <View style={{ paddingLeft: 20, height: 50, borderBottomWidth: 0.5, borderBottomColor: '#F2F6FC', alignItems: 'center', justifyContent: 'flex-start', width: '100%', flexDirection: 'row' }}>
                                <Text style={{ fontSize: 12, color: '#C0C4CC' }}>其他</Text>
                            </View>

                            <View style={{ paddingLeft: 20, paddingTop: 10, paddingBottom: 10 }}>
                                <View style={{ height: 45, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                        <Image source={require('../sources/Darwer/setting.png')} style={{ width: 20, height: 20 }} />
                                        <Text style={{ marginLeft: 20, fontWeight: 'bold', color: '#303133' }}>设置</Text>
                                    </View>
                                    <Image source={require('../sources/Darwer/goto_black.png')} style={{ width: 15, height: 15, marginRight: 20 }} />
                                </View>
                            </View>
                            <View style={{ paddingLeft: 20, paddingBottom: 10 }}>
                                <View style={{ height: 45, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                        <Image source={require('../sources/Darwer/yejian.png')} style={{ width: 20, height: 20 }} />
                                        <Text style={{ marginLeft: 20, fontWeight: 'bold', color: '#303133' }}>夜间模式</Text>
                                    </View>
                                    <Switch
                                        checked={this.state.checked}
                                        onChange={this._onSwitchChange}
                                        style={{ marginRight: 10 }}
                                        color="#4dd865"
                                    />
                                </View>
                            </View>
                            <View style={{ paddingLeft: 20, paddingBottom: 10 }}>
                                <View style={{ height: 45, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                        <Image source={require('../sources/Darwer/dingshi.png')} style={{ width: 22, height: 20 }} />
                                        <Text style={{ marginLeft: 20, fontWeight: 'bold', color: '#303133' }}>定时关闭</Text>
                                    </View>
                                    <Image source={require('../sources/Darwer/goto_black.png')} style={{ width: 15, height: 15, marginRight: 20 }} />
                                </View>
                            </View>
                            <View style={{ paddingLeft: 20, paddingBottom: 10 }}>
                                <View style={{ height: 45, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                        <Image source={require('../sources/Darwer/zhuangban.png')} style={{ width: 20, height: 20 }} />
                                        <Text style={{ marginLeft: 20, fontWeight: 'bold', color: '#303133' }}>个性装扮</Text>
                                    </View>
                                    <Image source={require('../sources/Darwer/goto_black.png')} style={{ width: 15, height: 15, marginRight: 20 }} />
                                </View>
                            </View>
                        </View>
                    </View>
                    <View style={{ padding: 15, marginBottom: 20 }}>
                        <View style={{ width: '100%', borderRadius: 15, backgroundColor: '#FFFFFF', flexDirection: 'row', justifyContent: 'center' }}>
                            <View style={{ padding: 15 }}>
                                <Text style={{ color: '#C3473A', fontSize: 17, fontWeight: 'bold' }}>关闭云音乐</Text>
                            </View>
                        </View>

                    </View>



                </ScrollView>
            </View>);


        return (
            <Provider>
                <Drawer
                    sidebar={sidebar}
                    position="left"
                    open={false}
                    drawerRef={el => (this.drawer = el)}
                    drawerBackgroundColor="#EBEEF5"
                >
                    <View style={styles.container}>
                        <TabNavigator
                            hidesTabTouch={true}
                        >
                            {tabViews}
                        </TabNavigator>
                    </View>
                </Drawer>
            </Provider>
        )
    }

    _openDrawer() {
        this.drawer
        this.drawer.openDrawer()
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#EEEEEE',
    },
    tabIcon: {
        width: 20,
        height: 20,
    },
    hidden: {
        display: 'none'
    }
});